<template>
  <div style="padding: 15px;">
    <div style="margin-bottom: 15px;">
      <Input style="width: 200px;" v-model="staffName" placeholder="请输入学生姓名"/>
      <Input style="width: 200px;" v-model="mobile" placeholder="请输入学生账号"/>
      <Select v-model="orgId" style="width:200px" placeholder="请选择机构">
        <Option v-for="item in orgIdList" :value="item.id" :key="item.id">{{ item.name   }}</Option>
      </Select>
      <Button @click="searchStudent" type="success">搜索</Button>
      <Button @click="addAndEdit('添加学生', 'addStudent')" type="primary" style="float: right;">添加学生</Button>
    </div>
    <Table border ref="selection" :columns="studentTitel" :data="studentData"></Table>
    <page-com :total="total" @page-change="pageChange"></page-com>
    <Modal v-model="orgStudentModal" :title="modalTitle" @on-ok="submit" @on-cancel="cancel">
      <Form :model="orgStudentForm" :label-width="80">
        <FormItem label="学生姓名">
          <Input v-model="orgStudentForm.staffName" placeholder="请输入学生姓名"/>
        </FormItem>
        <FormItem label="联系电话">
          <Input v-model="orgStudentForm.mobile" placeholder="请输入联系电话"/>
        </FormItem>
        <FormItem label="所属机构">
          <Select v-model="orgStudentForm.orgId" style="width:200px" placeholder="请选择机构">
            <Option v-for="item in orgIdList" :value="item.id" :key="item.id">{{ item.name   }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import PageCom from '@/components/page'
  import {formatDate} from '_com/date'
  export default {
    name: 'index',
    components: {
      PageCom
    },
    data () {
      return {
        orgStudentForm: {},
        size: 10,
        number: 1,
        total: 0,
        modalfun: '',
        modalTitle: '',
        mobile: '',
        staffName: '',
        orgId: '',
        studentTitel: [
          {
            title: '学生姓名',
            key: 'staffName',
            align: 'center'
          },
          {
            title: '账户名',
            key: 'loginName',
            align: 'center'
          },
          {
            title: '所属机构',
            key: 'orgName',
            align: 'center'
          },
          {
            title: '联系电话',
            key: 'loginName',
            align: 'center'
          },
          {
            title: '注册时间',
            key: 'createTime',
            align: 'center',
            render: (h, params) => {
              return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.addAndEdit('编辑学生', 'editStudent')
                      this.orgStudentForm = params.row
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '你确定要删除吗？',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => {
                          this.remove(params.row.id)
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        studentData: [],
        orgIdList: [],
        orgStudentModal: false
      }
    },
    mounted() {
      this.orgList()
      this.handleStudentList()
    },
    methods: {
      orgList() {
        this.$get('/api/api/sys/org/list').then((res) => {
          if (res.code === 0) {
            this.orgIdList = res.data
          }
        })
      },
      handleStudentList() {
        this.$get('/api/api/sys/admin/sysAdminStuPage', {
          staffName: this.staffName,
          mobile: this.mobile,
          orgId: this.orgId,
          size: this.size,
          number: this.number
        }).then((res) => {
          if (res.code === 0) {
            this.studentData = res.data
            this.total = res.total
          }
        })
      },
      addAndEdit(title, fun) {
        this.orgStudentModal = true
        this.modalTitle = title
        this.modalfun = fun
      },
      submit() {
        this[this.modalfun]()
      },
      addStudent () {
        let orgStudentForm = {
          staffName: this.orgStudentForm.staffName,
          mobile: this.orgStudentForm.mobile,
          orgId: this.orgStudentForm.orgId
        }
        this.$post('/api/api/sys/admin/addStu', orgStudentForm).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$Message.error('改手机号已经注册')
              return false
            }
            this.$Message.success('添加成功')
            this.handleStudentList()
            this.cancel()
          } else {
            this.$Message.error('添加失败')
          }
        }).catch(() => this.$Message.error('添加失败'))
      },
      editStudent () {
        let orgStudentForm = {
          staffName: this.orgStudentForm.staffName,
          mobile: this.orgStudentForm.mobile,
          orgId: this.orgStudentForm.orgId,
          id: this.orgStudentForm.id
        }
        this.$put('/api/api/sys/admin/updateStu', orgStudentForm).then((res) => {
          if (res.code === 0) {
            if (res.message === 'OK') {
              this.$Message.success('修改成功')
              this.handleStudentList()
              this.cancel()
            }
          } else {
            this.$Message.error('修改失败')
          }
        }).catch(() => this.$Message.error('修改失败'))
      },
      remove(id) {
        this.$deletes('/api/api/sys/admin/deleteSysAdminStu', {id: id}).then((res) => {
          if (res.code === 0) {
            if (res.message === 'OK') {
              this.$Message.success('删除成功')
              this.handleStudentList()
              this.cancel()
            }
          } else {
            this.$Message.error('删除失败')
          }
        }).catch(() => this.$Message.error('删除失败'))
      },
      cancel() {
        this.orgStudentForm = {}
      },
      searchStudent () {
        this.handleStudentList()
      },
      pageChange(data) {
        this.number = data + 1
        this.handleStudentList()
      }
    }
  }
</script>

<style scoped>

</style>
